<template>
	<view>
		<view :class="['tip-container', {'bgc-blue':!isYellow}, {'bgc-yellow':isYellow}]" @click.stop="clickTip"  @blur="loseBulr" :style="{'width': messageLength + 'rpx'}">
			<view class="tip-message">
				{{message}}
			</view>
			<text class="iconfont icon-xiangxia1 xiangxia"></text>
		</view>
	</view>
</template>

<script>
	import {checkStrType, calculateLength, checkStrType2} from '@/util/regular/regular.js';
	export default {
		props: {
			message:{
			  type:String,
			  default: '测试'
			},
			height: {
				type: Number,
				default: 30
			},
			nameWidth: {							// 名字的父盒子长度
				type: Number,
				default: 30
			},
			isYellow: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			/** 监听切换账本时名字变化
			 * @param {Object} old 旧值
			 * @param {Object} new1 新值
			 */
			message(old, new1) {
				console.log('old', old);
				console.log('new', new1);
				this.getMessageLength(new1);
			}
		},
		data() {
			return {
				messageLength: 0,
			};
		},
		methods: {
			getMessageLength(value) {
				this.messageLength = checkStrType2(value ? value :this.message, 40, 35);
			},
			// 点击事件
			clickTip() {
				this.$emit('showSelectTimeFunction');
			},
			// 失去焦点事件
			loseBulr(){
				console.log("123121")
			}
		},
		mounted() {
			console.log(this.nameWidth, "长度");
			this.getMessageLength();
		},
	}
</script>

<style lang="scss">
	.tip-container{
		// background-color: #f4de6b;
		padding: 10rpx 10rpx;
		box-sizing: border-box;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #5e568c;
		font-weight: 500;
		border-radius: 20rpx;
		font-size: 24rpx;
		.tip-message{
			margin-right: 5rpx;
		}
		.xiangxia{
			line-height: 200rpx;
		}
	}
	.bgc-yellow {
		background-color: #f4de6b;
	}
	.bgc-blue {
		background-color: #e9e9fd;
	}
</style>
